<template>
  <div class="navbar">
    <el-menu
        :default-active="activeIndex"
        active-text-color="#ffd04b"
        background-color="#409EFF"
        class="el-menu"
        mode="horizontal"
        router
        text-color="#fff"
        @select="handleSelect"
    >
      <el-menu-item index="/home">首页</el-menu-item>
      <el-menu-item index="/book_class">全部作品</el-menu-item>
      <el-menu-item index="/book_rank">排行榜</el-menu-item>
      <el-menu-item index="/author/register">作家专区</el-menu-item>
<!--      <el-menu-item index="/test">测试页面</el-menu-item>-->
    </el-menu>

  </div>
</template>

<script lang="ts" setup>
import {nextTick, onMounted, ref, watch} from "vue";
import {useNavbarStore} from '@/stores/navbar'
import {storeToRefs} from "pinia";
import {useRouter} from "vue-router";
import {useAuthStore} from "@/stores/auth";
import {getAuthorStatus} from "@/api/author";

const authStore = useAuthStore()
const navbarStore = useNavbarStore()
const activeIndex = ref<string>(navbarStore.getActiveIndex())
const handleSelect = (key: string, keyPath: string[]) => {
  navbarStore.setActiveIndex(key)
}
const router = useRouter()
onMounted(() => {
  // nextTick(() => {
  //   const currentPath = router.currentRoute.value.path
  //   console.log(currentPath)
  //   navbarStore.setActiveIndex(currentPath)
  // })
})
watch(() => navbarStore.activeIndex, () => {
  activeIndex.value = navbarStore.getActiveIndex()
}, {deep: true, immediate: true})

</script>
<style lang="scss">
.navbar {
  background-color: #409EFF;
  color: #fff;
  //width: 60%;
  margin: 0 auto;

  .el-menu {
    height: 50px;
    width: 60%;
    margin: 0 auto;
  }
}


</style>